<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2023-11-15 17:15:57
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-12-23 11:18:58
 * @FilePath: \vue3-progect\src\components\BaseTable\BaseTable\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 基本表格 -->
<template>
	<BaseCard ref="CardAreaEl" :bodyStyle="{ padding: '20px 20px 10px' }">
		<!-- 搜索区域 -->
		<BaseSearch
			ref="SearchAreaEl"
			:searchConfig="searchConfig"
			:searchBtnConfig="searchBtnConfig"
			@searchClick="searchClick"
			@resetClick="resetClick"
		/>
		<!-- table 顶部区域 -->
		<div class="table_top_area" ref="tableTopAreEl">
			<!-- table 顶部区域--左边区域 -->
			<div class="table_top_left_area">
				<el-button @click="createClick" style="margin-bottom: 10px"
					>新增</el-button
				>
			</div>
			<!-- table 顶部区域--右边区域 -->
			<div class="table_top_right_area"></div>
		</div>
		<!-- table 区域 -->
		<CustomTable :optionAll="optionAll" :autoHeight="tableHeight" />
		<!-- table 分页区域 -->
		<BasePagination
			ref="PageAreaEl"
			:page="option.page"
			:pageConfig="option.pageConfig"
			:pageOption="option.pageOption"
		/>
		<!-- 表单弹窗功能 -->
		<BaseFormDialog
			:formConfig="formConfig"
			v-model="formDialogShow"
			v-model:form="form"
			@returnFormDialogData="returnFormDialogData"
		></BaseFormDialog>
	</BaseCard>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import CustomTable from "./CustomTable.vue";
import { onMounted, onUnmounted, ref, computed, watchEffect, watch } from "vue";
const router = useRouter();
const props = defineProps({
	option: { type: Object, default: () => ({}) },
	eventOption: { type: Object, default: () => ({}) }
});
/**
 * eventOption:
 *  -- getData 获取列表接口
 *  -- confirmBtn 弹窗确认按钮
 */
const emits = defineEmits(["searchHandler", "resetHandler"]);
const optionConfig = ref({
	search: true,
	index: true,
	menu: false,
	cellEmptyText: "-",
	column: [],
	data: []
});
let optionAll = computed(() => {
	return {
		...optionConfig.value,
		...props.option
	};
});
//----search
let searchConfig = ref([]);
//----form
let formConfig = ref([]);
let form = ref({});

//监听 column 变化
watch(
	() => props.option.column,
	() => {
		searchConfig.value = [];
		formConfig.value = [];
		optionAll.value.column.forEach((item) => {
			//过滤检索配置
			if (item.search) {
				searchConfig.value.push(item);
			}
			//过滤表单配置
			if (item.form) {
				formConfig.value.push(item);
			}
		});
	},
	{ deep: true, immediate: true }
);
/**
 * 获取检索区域高度，动态计算table高度
 */
const CardAreaEl = ref(null);
const SearchAreaEl = ref(null);
const tableTopAreEl = ref(null);
const PageAreaEl = ref(null);
let tableHeight = ref();

onMounted(() => {
	let timer = setTimeout(() => {
		calcTableHeight();
		window.addEventListener("resize", calcTableHeight);
	}, 500);
});
/**
 * 计算table高度
 */
const calcTableHeight = () => {
	let cardAreaHeight = CardAreaEl.value.cardEl.clientHeight;
	let searchAreaHeight = SearchAreaEl.value.searchEl.clientHeight;
	let tableTopAreaHeight = tableTopAreEl.value.clientHeight;
	let pageAreaHeight = PageAreaEl.value.pageEl.clientHeight;
	console.log(
		cardAreaHeight,
		searchAreaHeight,
		pageAreaHeight,
		tableTopAreaHeight,
		"cardAreaHeight - searchAreaHeight - pageAreaHeight - tableTopAreaHeight"
	);
	let value =
		cardAreaHeight - searchAreaHeight - pageAreaHeight - tableTopAreaHeight;
	tableHeight.value = value;
};

/**
 * 搜索
 */
const searchClick = (search) => {
	emits("searchHandler", search);
	console.log(search.value, "搜索");
};
/**
 * 重置
 */
const resetClick = () => {
	emits("searchHandler");
	console.log("重置");
};

onUnmounted(() => {
	//移除监听事件
	window.removeEventListener("resize", calcTableHeight);
});

/**
 * 标准按钮-form弹窗的新增按钮
 */
let formDialogShow = ref(false);
const createClick = () => {
	if (props.eventOption.createBtnClick) {
		props.eventOption.createBtnClick(formDialogShow);
	} else {
		formDialogShow.value = true;
	}
};
/**
 * 标准按钮-form弹窗表单-回调
 */
const returnFormDialogData = async ({ done, btnType = "" }) => {
	try {
		const doneHandler = (callback) => {
			done();
			callback && callback();
		};
		console.log("form表单信息：", form.value, done);
		if (btnType == "create") {
			props.eventOption.createSubmit &&
				(await props.eventOption.createSubmit(form, doneHandler));
		}
		// props.eventOption.getData && (await props.eventOption.getData());
	} catch (error) {
		console.log("点击弹窗确定:", error);
	}
};

/**
 * 定义搜索按钮
 */
let searchBtnConfig = computed(() => {
	return optionAll.value.searchBtn ? optionAll.value.searchBtn : [];
});
</script>

<style lang="less" scoped></style>
